<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>系统资源</title>
    <link rel="icon" type="image/x-icon" href="https://static.platform.jwzhu.com/image/icon.ico">

    <link rel="stylesheet" href="https://static.platform.jwzhu.com/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/common.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/form.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/table.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/dialog.css">
    <style>
        .permission {
            padding: 0.5rem 2rem;
            border-top: 1px solid #757575;
            border-bottom: 1px solid #757575;
            margin-bottom: -1px;
            display: flex;
        }

        .permission-name {
            pointer-events: none;
        }

        .permission-children {
            display: none;
            padding-left: 2rem;
        }

        .permission-children.active {
            display: block;
        }
    </style>
</head>
<body>
<form id="form_role_query" class="form margin-top-1 form-inline">
    <div class="form-row">
        <div class="form-input-group">
            <label class="form-label">关键字：</label>
            <input name="key" class="form-input">
        </div>
        <div class="form-input-group">
            <label class="form-label">状态：</label>
            <select id="form_role_query_roleStatus" name="roleStatus" class="form-input"></select>
        </div>
        <div class="form-input-group margin-left-1">
            <button type="button" onclick="(()=>tableRole.reload())()">查询</button>
            <button type="reset" class="margin-left-1">重置</button>
        </div>
    </div>
</form>
<div id="table_role">
</div>
<div id="dialog_role" class="dialog">
    <div class="dialog-body">
        <form id="form_role" class="form dialog-content">
            <input id="form_role_id" type="hidden" name="id">
            <div class="form-row">
                <div class="form-input-group flex-1">
                    <label class="form-label">编码：</label>
                    <input type="text" name="code" class="form-input" data-readonly="|Edit|">
                </div>
            </div>
            <div class="form-row">
                <div class="form-input-group flex-1">
                    <label class="form-label">名称：</label>
                    <input type="text" name="name" class="form-input" data-readonly>
                </div>
            </div>
        </form>
    </div>
</div>
<div id="dialog_permission" class="dialog">
    <input id="dialog_permission_roleCode" type="hidden">
    <div class="dialog-body">
        <div id="permission" class="dialog-content">

        </div>
    </div>
</div>
</body>
<script src="https://static.platform.jwzhu.com/js/request.js"></script>
<script src="https://static.platform.jwzhu.com/js/form.js"></script>
<script src="https://static.platform.jwzhu.com/js/table.js"></script>
<script src="https://static.platform.jwzhu.com/js/dialog.js"></script>
<script src="https://static.platform.jwzhu.com/js/permission-filter.js"></script>
<script src="https://static.platform.jwzhu.com/js/common.js"></script>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById('form_role_query_roleStatus').initSelect('/availableStatus', true);
    };
    const permissionType = {1: 'M', 2: 'P', 3: 'F'};

    let dialogRole = Dialog.create({
        dialogId: 'dialog_role',
        bottomButtons: [{
            id: 'save',
            title: '保存',
            permission: 'permission.role.updateById',
            classNames: 'float-right',
            closeAfterClick: true,
            onclick: function () {
                updateRole();
            }
        }, {
            id: 'submit',
            title: '提交',
            permission: 'permission.role.add',
            classNames: 'float-right',
            closeAfterClick: true,
            onclick: function () {
                addRole();
            }
        }]
    });

    let dialogPermission = Dialog.create({
        dialogId: 'dialog_permission',
        title: '资源权限'
    });

    let tableRole = Table.init({
        tableDivId: 'table_role',
        queryFormId: 'form_role_query',
        url: '/role/queryByParam',
        column: [
            {title: '编码', name: 'code'},
            {title: '名称', name: 'name'},
            {title: '状态', name: 'roleStatusText'},
            {title: '添加时间', name: 'createTime'}],
        bottomButtons: [{
            id: 'add',
            title: '添加',
            permission: 'permission.role.add',
            faClass: 'fa-plus',
            onclick: function () {
                addRoleView();
            }
        }],
        rowOperate: function () {
            let operates = [];
            operates.push({
                id: 'edit',
                title: '编辑',
                permission: 'permission.role.updateById',
                onclick: updateRoleView
            }, {
                id: 'permission',
                title: '权限',
                permission: 'permission.role.queryRoleResource',
                onclick: permissionView
            });
            if (this.roleStatus === 1) {
                let id = this.id;
                operates.push({
                    id: 'disable',
                    title: '禁用',
                    permission: 'permission.role.disable',
                    onclick: function () {
                        common.confirmRequest(id, '/role/disable', 'table_role', '是否确认禁用该角色');
                    }
                });
            } else if (this.roleStatus === -1) {
                let id = this.id;
                operates.push({
                    id: 'enable',
                    title: '启用',
                    permission: 'permission.role.enable',
                    onclick: function () {
                        common.confirmRequest(id, '/role/enable', 'table_role', '是否确认启用该角色');
                    }
                }, {
                    id: 'delete',
                    title: '删除',
                    permission: 'permission.role.delete',
                    onclick: function () {
                        common.confirmRequest(id, '/role/delete', 'table_role', '是否确认删除该角色');
                    }
                });
            }
            return operates;
        }
    });

    let addRoleView = function () {
        document.getElementById('form_role').reset();
        let dialogTitle = '添加资源';

        dialogRole.setTitle(dialogTitle).hideBottomButton().showBottomButton('submit').open();
    };

    let updateRoleView = function () {
        Request.get({
            url: '/role/getById',
            params: {id: this.id},
            success: data => {
                let _formHtml = document.getElementById('form_role');
                _formHtml.addReadOnly('Edit');
                _formHtml.setForm(data);
                dialogRole.setTitle('编辑资源').hideBottomButton().showBottomButton('save').open();
            }
        });
    };

    let addRole = function () {
        let formData = document.getElementById('form_role').getForm();
        Request.post({
            url: '/role/add',
            params: formData,
            success: () => {
                tableRole.reload();
            }
        });
    };

    let updateRole = function () {
        let formData = document.getElementById('form_role').getForm();
        Request.post({
            url: '/role/updateById',
            params: formData,
            success: () => {
                tableRole.reload();
            }
        });
    };

    let permissionView = function () {
        document.getElementById('dialog_permission_roleCode').setValue(this.code);
        Request.get({
            url: '/role/queryRoleResource',
            params: {roleCode: this.code},
            success: data => {
                let htmlString = '';
                data.forEach(function (item) {
                    htmlString += `<div>
                                        <div class="permission" onclick="permissionClick()">
                                            <span class="permission-name">${item.name}</span>
                                            <input data-content="${common.string.dealEmpty(permissionType[item.type])}" data-resourceCode="${item.code}" type="checkbox" class="switch margin-auto margin-right-no" ${item.have ? 'checked' : ''} onchange="permissionChange()">
                                        </div>
                                        <div class="permission-children">${getChildrenHtmlString(item.children)}</div>
                                   </div>`;
                });
                document.getElementById('permission').innerHTML = htmlString;
                dialogPermission.open();
            }
        });
    };

    let getChildrenHtmlString = function (children) {
        let htmlString = '';
        if (!children) {
            return htmlString;
        }

        children.forEach(function (item) {
            htmlString += `<div>
                                <div class="permission" onclick="permissionClick()">
                                    <span class="permission-name">${item.name}</span>
                                    <input data-content="${common.string.dealEmpty(permissionType[item.type])}" data-resourceCode="${item.code}" type="checkbox" class="switch margin-auto margin-right-no" ${item.have ? 'checked' : ''} onchange="permissionChange()">
                                </div>
                                <div class="permission-children">${getChildrenHtmlString(item.children)}</div>
                           </div>`;
        });
        return htmlString;
    };

    let permissionClick = function () {
        let $target = window.event.target;
        let $children = $target.parentNode.querySelector('.permission-children');
        if (!$children) {
            return;
        }
        window.event.stopPropagation();
        if ($children.classList.contains('active')) {
            $children.classList.remove('active');
        } else {
            $children.classList.add('active');
        }
    };

    let permissionChange = function () {
        let $target = window.event.target;
        let roleCode = document.getElementById('dialog_permission_roleCode').value;
        let resourceCode = $target.getAttribute('data-resourceCode');
        let url = '/role/removePermission';
        if ($target.checked) {
            url = '/role/addPermission';
        }
        Request.post({
            url: url,
            params: {roleCode: roleCode, resourceCode: resourceCode},
            returnAll: true,
            showMessage: false,
            success: data => {
                if (data.code !== 1) {
                    $target.checked = !$target.checked;
                }
            }
        });
    };

</script>
</html>